<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      margin-top="20px"
      class="demo-ruleForm"
    >
      <el-form-item label="维修单名称" prop="RName">
        <el-input
          v-model="ruleForm.RName"
          placeholder="选择维修单名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="维修单编号" prop="Rnum">
        <el-input
          v-model="ruleForm.Rnum"
          placeholder="选择维修单编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="设备名称" prop="EName">
        <el-input
          v-model="ruleForm.EName"
          placeholder="选择设备名称"
          disabled
        ></el-input>
        <el-button type="text" @click="(dialogTableVisible = true), upd()"
          >高级选择</el-button
        >
      </el-form-item>
      <el-form-item label="设备编号" prop="Enum">
        <el-input
          v-model="ruleForm.Enum"
          placeholder="选择设备编号"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌" prop="BName">
        <el-input
          v-model="ruleForm.BName"
          placeholder="选择品牌"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="保修日期" prop="AddTime">
        <el-input
          type="date"
          placeholder="选择保修日期"
          v-model="ruleForm.AddTime"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="Rremark">
        <el-input type="textarea" v-model="ruleForm.Rremark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="选择设备" :visible.sync="dialogTableVisible">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="Rid" label="维修单Id"> </el-table-column>
        <el-table-column prop="RName" label="维修单名称"> </el-table-column>
        <el-table-column prop="Rnum" label="维修单编号"> </el-table-column>
        <el-table-column prop="AddTime" label="添加时间"> </el-table-column>
        <el-table-column prop="Rremark" label="备注"> </el-table-column>
        <el-table-column prop="EName" label="设备名称"> </el-table-column>
        <el-table-column prop="Enum" label="设备编号"> </el-table-column>
        <el-table-column prop="EType" label="设备类型"> </el-table-column>
        <el-table-column prop="Ecare" label="维修车间"> </el-table-column>
        <el-table-column prop="BName" label="品牌名称"> </el-table-column>
        <el-table-column prop="CreatorId" label="创建人"> </el-table-column>
        <el-table-column prop="CreateDate" label="创建时间"> </el-table-column>
        <el-table-column prop="Updator" label="修改人"> </el-table-column>
        <el-table-column prop="UpdateDate" label="修改时间"> </el-table-column>
      </el-table>
      <el-button type="primary" icon="el-icon-edit" circle
        >添加选择的数据</el-button
      >
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        RName: "",
        Rnum: "",
        Enum: "",
        BName: "",
        AddTime: "",
        Rremark: "",
      },
      multipleSelection: [],
      rules: {
        RName: [
          { required: true, message: "请输入维修单名称", trigger: "blur" },
        ],
        AddTime: [
          {
            type: "date",
            required: true,
            message: "请选择保修日期",
            trigger: "change",
          },
        ],
        Rremark: [{ required: true, message: "请填写备注", trigger: "blur" }],
        BName: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        Rnum: [
          { required: true, message: "请输入维修单编号", trigger: "blur" },
        ],
      },
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    SearchC() {
      this.$router.push("/RepairOrders");
    },
    getRepairOrders() {
      this.axios
        .get("http://localhost:5255/api/RepairOrders/GetRepairs")
        .then((res) => {
          this.tableData = res.data.Data;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //编辑
    upd() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要编辑的数据",
          type: "warning",
        });
        return;
      }
      if (!(this.multipleSelection.length == 1)) {
        this.$message({
          message: "只能选择一行编辑的数据",
          type: "warning",
        });
        return;
      }
      let ps = [];
      this.multipleSelection.forEach((e) => {
        ps.push(e.Rid);
      });
      this.axios
        .get(
          "http://localhost:5255/api/RepairOrders/GetRepairOrdersById?Rid=" + ps
        )
        .then((res) => {
          this.form = res.data;
          this.dialogTableVisible = true;
        });
    },
  },
  created() {
    this.getRepairOrders();
  },
};
</script>